<template>
	<div class="content">
		<div class="content_title">
			<p>我的创业项目</p>
		</div>
		<div class="content_bottom">
			<button v-if="!dataList.isHas" class="btnS tianjia" @click="addProject('add')">添加</button>
			<button v-if="dataList.isHas" class="btnS xiugai" @click="addProject('amend')">修改</button>
			<div class="content_bottom_left">
				<p>{{dataList.form.projectName}}</p>
				<li>
					<img src="../../assets/user/p-icon1.png" alt="">
					<span>单位名称：</span>
					<span>{{dataList.form.deptName}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon2.png" alt="">
					<span>所在地区：</span>
					<span>{{dataList.form.deptRegion}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon3.png" alt="">
					<span>成立日期：</span>
					<span>{{dataList.form.establishingTime}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon4.png" alt="">
					<span>行业领域：</span>
					<span>{{dataList.form.industrySector}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon5.png" alt="">
					<span>经营规模：</span>
					<span>{{dataList.form.businessScale}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon6.png" alt="">
					<span>特色产品：</span>
					<span>{{dataList.form.featuredProducts}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon7.png" alt="">
					<span>年营业额：</span>
					<span>{{dataList.form.annualTurnover}}万</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon8.png" alt="">
					<span>项目简介：</span>
					<span>{{dataList.form.projectProfile}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon9.png" alt="">
					<span>项目规划：</span>
					<span>{{dataList.form.projectPlanning}}</span>
				</li>
				<li>
					<img src="../../assets/user/p-icon10.png" alt="">
					<span>帮扶需求：</span>
					<span>{{dataList.form.helpNeeds}}</span>
				</li>
			</div>
			<div class="content_bottom_r">
				<img :src="dataList.form.projectUrl" alt="">
			</div>
		</div>

		<el-dialog v-model="dataList.show" :show-close="false" width="900px" :close-on-click-modal="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<h4>添加项目</h4>
					<img src="../../assets/apply/close.png" alt="" @click="dataList.show = false">
				</div>
			</template>
			<div class="my_content">
				<li>
					<p>项目名称：</p>
					<input type="text" placeholder="请输入项目名称" v-model="dataList.form.projectName">
				</li>
				<li>
					<p>单位名称：</p>
					<input type="text" placeholder="请输入单位名称" v-model="dataList.form.deptName">
				</li>
				<li>
					<p>所在地区：</p>
					<input type="text" placeholder="请输入所在地区" v-model="dataList.form.deptRegion">
				</li>
				<li>
					<p>成立日期：</p>
					<el-date-picker v-model="dataList.form.establishingTime" value-format="YYYY-MM-DD" type="date"
						placeholder="请假日期" size="default" />
				</li>
				<li>
					<p>行业领域：</p>
					<input type="text" placeholder="请输入行业领域" v-model="dataList.form.industrySector">
				</li>
				<li>
					<p>经营规模：</p>
					<input type="text" placeholder="请输入经营规模" v-model="dataList.form.businessScale">
				</li>
				<li>
					<p>特色产品：</p>
					<input type="text" placeholder="请输入特色产品" v-model="dataList.form.featuredProducts">
				</li>
				<li>
					<p>年营业额：</p>
					<input type="text" placeholder="请输入年营业额" v-model="dataList.form.annualTurnover">
				</li>
				<li>
					<p>项目简介：</p>
					<input type="text" placeholder="请输入项目简介" v-model="dataList.form.projectProfile">
				</li>
				<li>
					<p>项目规划：</p>
					<input type="text" placeholder="请输入项目规划" v-model="dataList.form.projectPlanning">
				</li>
				<li>
					<p>帮扶需求：</p>
					<input type="text" placeholder="请输入帮扶需求" v-model="dataList.form.helpNeeds">
				</li>
				<li class="imgBox">
					<p>添加图片：</p>
					<div class="upBox">
						<div class="imgList" v-for="(img,idx) in dataList.img_list">
							<div class="closeIcon" @click="delateImg(idx)">
								<el-icon>
									<Close />
								</el-icon>
							</div>
							<img :src="img" alt="">
						</div>
						<div @click="addImg" class="addImgIcon">
							<p>添加图片</p>
							<el-icon :size="20">
								<Plus />
							</el-icon>
						</div>
						<input style="opacity: 0;" id="uploder" type="file" @change="getImg">
					</div>
				</li>
				<div class="box_btn">
					<button class="btnS" @click="addSubmit">提交</button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import COS from 'cos-js-sdk-v5'
	// var COS = require('cos-wx-sdk-v5')
	import {saveStudentProject,updateStudentProject,getByWxUserUuid,getTxCosCredential} from '../../api/home.js';
	import {
		reactive,
		ref,
		onBeforeMount
	} from 'vue';
	import {
		ZoomIn,
		Plus,
		Close
	} from '@element-plus/icons-vue';
	const $myemit = defineEmits(['addComment', 'lookImg'])
	const dataList = reactive({
		isHas:false,
		total: 10,
		page: 1,
		tabId: 1,
		show: false,
		essayList: '',
		search: '',
		form: {
			projectName: '',
			deptName: '',
			deptRegion: '',
			establishingTime: '',
			industrySector: '',
			businessScale: '',
			featuredProducts: '',
			annualTurnover: '',
			projectProfile: '',
			projectPlanning: '',
			helpNeeds: '',
			projectUrl: []
		},
		stsToken: '',
		img_list: [],
		cos: '',
		type:''
	})
	onBeforeMount(() => {
		getList()
		getTxCos()
	})
	const addImg = () => {
		var imgup = document.getElementById('uploder')
		document.getElementById('uploder').click()
	}

	// 删除图片
	const delateImg = (idx) => {
		dataList.img_list.splice(idx, 1)
	}
	const getImg = (e) => {
		if(dataList.img_list.length>1){
			return
		}else{
			var file = e.target.files;
			console.log(file)
			for (var i = 0; i < file.length; i++) {
				uploadFilePromise(file[i])
			}
		}
		
	}
	// https://zyk.icve.com.cn/hnhlkq/tm-openapi
	const addProject = (type) => {
		dataList.show = !dataList.show
		dataList.type = type
	}
	const addSubmit = (url) => {
		var data = {
			params: {
				...dataList.form,
				projectUuid: '',
				projectUrl: dataList.img_list[0] || ''
			}

		}
		if(dataList.type == 'add'){
			saveStudentProject(data).then(res=> {
				ElMessage({
					message: '提交成功',
					type: 'success',
				})
				dataList.show = false
			})
		}else{
			updateStudentProject(data).then(res=> {
				ElMessage({
					message: '修改成功',
					type: 'success',
				})
				dataList.show = false
			})
		}
	}


	const getList = () => {

		var data = {
			params: localStorage.getItem('userUuid')

		}
		getByWxUserUuid(data).then(res=> {
			if(res.data){
				dataList.isHas = true
				dataList.form = res.data
				dataList.img_list = []
				dataList.img_list.push(res.data.projectUrl)
			}else{
				dataList.isHas = false
			}
			
		})
	}
	const getTxCos = () => {

		var data = {}
		getTxCosCredential(data).then(res=> {
			dataList.stsToken = res.data
		})
	}
	const uploadFilePromise = (file) => {
		const cos = new COS({
			getAuthorization: function(option, callback) {
				callback({
					TmpSecretId: dataList.stsToken.credentials.tmpSecretId,
					TmpSecretKey: dataList.stsToken.credentials.tmpSecretKey,
					XCosSecurityToken: dataList.stsToken.credentials.sessionToken,
					ExpiredTime: dataList.stsToken.expiredTime
				})
			}
		})
		uploadFile(cos,file)
	}
	const uploadFile =  (cos, file)=> {
	      cos.putObject (
	        {
	          Bucket: "cos-1253892290",  // 存储桶名称
	          Region: 'ap-guangzhou', // 地区
	          Key:`/uploads/zizhi/${new Date().getTime()}${file.name}` , // 图片名称
	          Body: file,
	          onHashProgress: function (progressData) {
	            console.log ('校验中', JSON.stringify (progressData));
	          },
	          onProgress: function (progressData) {
	            console.log ('上传中', JSON.stringify (progressData));
	          },
	        },
	        function (err, data) {
	          if (err) {
	           // this.error(file)
	            return;
	          }
			  var imgUrl = `http://${data.Location}`
	          dataList.img_list.push(imgUrl)
	        }
	      );
	    }
</script>

<style lang="scss" scoped>
	.imgBox {
		display: flex;
		flex-direction: row !important;

		.upBox {
			display: flex;
			flex-wrap: wrap;
			margin-left: 0 !important;
			max-width: 685px;

			.imgList {
				border: 1px solid #9093997a;
				margin-right: 15px;
				margin-bottom: 15px;
				position: relative;

				.closeIcon {
					width: 20px;
					height: 20px;
					background-color: #9093997a;
					border-radius: 50%;
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					right: 0;
					top: 0;
				}

				img {
					width: 100px;
					height: 100px;

				}
			}

			.addImgIcon {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100px;
				height: 100px;
				border: 1px solid #9093997a;

			}
		}
	}

	.content {
		width: 910px;
		margin-left: 30px;

		&_title {
			width: 100%;
			border-bottom: 1px solid #D9D9D9;

			p {
				width: fit-content;
				font-size: 18px;
				font-weight: 600;
				color: #11918E;
				padding-bottom: 9px;
				border-bottom: 2px solid #11918E;
			}

		}

		&_bottom {
			margin-top: 30px;
			display: flex;
			position: relative;

			.xiugai {
				position: absolute;
				right: 0;
				top: 0;
			}

			.tianjia {
				position: absolute;
				right: 100px;
				top: 0;
			}

			&_left {
				display: flex;
				flex-direction: column;
				width: 350px;
				padding-right: 30px;

				li {
					display: flex;
					// align-items: center;
					padding: 10px 0;

					p {
						margin-bottom: 10px;
						font-size: 20px;
						font-weight: 600;
						color: #333333;
					}

					img {
						width: 21px;
						height: 21px;
					}

					span {
						font-size: 16px;
						font-weight: 600;
						color: #333333;
					}

					span:last-child {
						width: 215px;
					}
				}
			}

			&_r {
				margin-top: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					max-width: 500px;
					min-width: 200px;
					max-height: 270px;
				}
			}
		}
	}

	// 弹窗
	.my-header {
		position: relative;
		display: flex;
		justify-content: center;

		h4 {
			font-size: 26px;
			font-weight: 600;
			color: #11918E;
		}

		img {
			position: absolute;
			right: 0;
			top: 5px;
			width: 35px;
			height: 35px;
		}
	}

	.my_content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		li {
			width: 50%;
			display: flex;
			align-items: flex-start;
			margin-bottom: 15px;

			p {
				font-size: 16px;
				font-weight: 400;
				color: #333333;
				margin-top: 10px;
				// width: 100px;
			}

			input,
			textarea {
				border: none;
				outline: medium;
				background-color: #11918E;
				padding: 12px;
				width: 260px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
			}

			textarea {
				height: 130px;
			}

			:deep(.el-input__wrapper) {
				background-color: #11918E;
				padding: 3px 12px;
				width: 260px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
			}
		}

		.imgBox {
			width: 100%;
			display: flex;
			flex-direction: column;

			p {
				margin-bottom: 15px;
			}

			.upBox {
				margin-left: 62px;
			}
		}

		.box_btn {
			width: 100%;
			display: flex;
			justify-content: center;

			button {
				padding: 6px 60px;
			}
		}


	}
</style>